<template>
	<view class="userAdmin">
		<view class="search p20 dis">
			<view class="inputU">
				<up-input v-model="nickname" placeholder="请输入关键词" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></up-input>
			</view>
			<view class="userBut" @click="searchFun">搜索</view>
		</view>
		<view class="userList" v-if="memberList.length > 0">
			<view class="userItem p20 dis" v-for="item in memberList" :key="item.id" @click="editUser(item)">
				<view class="userImg">
					<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
					<image v-else src="/post/static/default_avatar.jpg" mode="aspectFill"></image>
				</view>
				<view class="userInfo dis">
					<view class="name">{{ item.nickname }}</view>
					<view class="school">{{ item.departmentName }}</view>
				</view>
			</view>
			<view class="noData">没有更多了</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
	</view>
</template>

<script setup>
import { getMember } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad((options) => {
	console.log('options', options);
	getMemberList();
});
onShow(() => {});

const editUser = (item) => {
	uni.navigateTo({
		url: `/post/user/adminEditUser?val=${item.id}`
	});
};

const searchFun = () => {
	pageNum.value = 1;
	memberList.value = [];
	getMemberList();
};

const nickname = ref('');
const pageNum = ref(1);
const pageSize = ref(20);
const total = ref(0);
const memberList = ref([]);
const getMemberList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		nickname: nickname.value
	};
	const res = await getMember(data);
	// console.log(res);
	if (res.code == 0) {
		total.value = res.data.pageInfo.total;
		memberList.value = [...memberList.value, ...res.data.pageInfo.list];
	}
};
onReachBottom(() => {
	if (memberList.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getMemberList();
	}
});
</script>

<style lang="scss" scoped>
.u-input {
	background-color: #f7f8fa !important;
}
.u-border,
.up-border {
	border-color: #fff !important;
}
.userAdmin {
	.search {
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #fff;
		.inputU {
			flex: 1;
		}
		.userBut {
			width: 120rpx;
			text-align: center;
		}
	}
	.userList {
		width: 100%;
		.userItem {
			margin-bottom: 20rpx;
			width: 100%;
			background-color: #fff;
			.userImg {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f7f7f7;
			}
			.userInfo {
				flex-direction: column;
				justify-content: space-between;
				padding: 5rpx 20rpx;
				.name {
					font-size: 28rpx;
					font-weight: 700;
					color: #676767;
				}
				.school {
					font-size: 26rpx;
					color: #888;
				}
			}
		}
	}
	.noData {
		width: 100%;
		color: #999;
		text-align: center;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
</style>
